<template>
  <div>
    <form class="form-signin-code">
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
        <label for="inputEmail" class="sr-only">手机号</label>
        <input type="text" id="inputTelephone" class="form-control" placeholder="手机号" required="" autofocus=""
               v-model="TNumber">
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="GetCode">
            <span v-show="!login.canGet">{{login.waitTime+"s后重新获取"}}</span>
            <span v-show="login.canGet">获取手机验证码</span>
        </button>
        <br>
        <label for="inputPassword" class="sr-only">请输入验证码</label>
        <input type="text" id="inputCode" class="form-control" placeholder="验证码" required="" v-model="Code">
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <a href="#" target="_top" rel="nofollow" style="position: center" @click="gotoregister()">免费注册</a>
    </form>
  </div>
</template>

<script>
import topbar from '../../common/topbar.vue';
import headbar from '../../common/headbar.vue';
export default {
    data: function () {
            return {
                TNumber:'',
                Code:'',
                tempLogin: {
                    canGet: true,
                    timer: null,
                    waitTime: 60
                }
            }
        },
        computed: {
            login() { //最终对象
                if (!this.tempLogin.canGet) {
                    return this.timeCountdown(this.tempLogin);
                } else {
                    return this.tempLogin;
                }
            }
        },
        methods: {
            timeCountdown(obj) {  //obj包括timer、waitTime 、canGet
                const TIME_COUNT = 60; //默认倒计时秒数
                if (!obj.timer) {
                    obj.waitTime = TIME_COUNT;
                    obj.canGet = false;
                    obj.timer = setInterval(() => {
                        if (obj.waitTime > 0 && obj.waitTime <= TIME_COUNT) {
                            obj.waitTime--;
                        } else {
                            obj.canGet = true;
                            clearInterval(obj.timer); //清空定时器
                            obj.timer = null;
                        }
                    }, 1000)
                }
                return {
                    timer: obj.timer,
                    canGet: obj.canGet,
                    waitTime: obj.waitTime
                }
            },
            GetCode() {
                 if (!(/^1[3456789]\d{9}$/.test(TNumber))) {
                     alert("输入手机号码格式有误")
                 } else {
                     this.timeCountdown(this.login)
                 }
            },
            gotoregister(){
                this.$router.push('/register')
            }
        },
        components:{
          topbar:topbar,
          headbar:headbar
       }
}
</script>

<style scoped>
  .form-signin-code {
            width: 300px;
            position: absolute;
            top: 250px;
            left: 850px;
        }
</style>